﻿<%@ Page Title="" Language="C#" MasterPageFile="~/NestedMasterPageSimple.master" EnableEventValidation="false" CodeFile="OrderDetailAndPayment.aspx.cs" Inherits="OrderDetailAndPayment" %>

<asp:Content ID="Content1" ContentPlaceHolderID="NestedContent" runat="Server">
  <script type="text/javascript">

    $(document).ready(function () {

      //確認手機條碼不可使用複製
      $("[id*='txtCellPhoneCodeCheck']").bind("cut copy paste", function (e) {
        e.preventDefault();
      });

      //日期建立
      fillDay();
      //月變更事件
      $('#<%= ddlMonth.ClientID %>').change(function () {
        fillDay();
      });
      //日變更事件
      $('#ddlDay').change(function () {
        var day = $(this).find(':selected').val();
        //值暫存
        $('#<%= hiddenDay.ClientID %>').val(day);
      });

      //Credit Card Help
      $('#aCreditCardHelp').click(function () {
        lightbox($(".popup-content .credit-card").prop('outerHTML'));
        return false;
      });

      //發票類別進行確認
      CheckReceiptType();

      //發票類別Click事件
      $('#<%= rbReceiptType1.ClientID %>,#<%= rbReceiptType2.ClientID %>,#<%= rbReceiptType3.ClientID %>').click(function () {
        CheckReceiptType();
      });

      //電子發票證明聯、手機條碼與自然人確認
      CheckRecept();
      //電子發票證明聯、手機條碼與自然人憑證 Click事件
      $('#<%= rbReceipt1.ClientID %>,#<%= rbReceipt2.ClientID %>,#<%= rbReceipt3.ClientID %>').click(function () {
        CheckRecept();
      });

      //我要索取電子發票證明聯Click事件
      $('#<%=cbReceiptPrint.ClientID %>').click(function () {
        if ($('#<%= cbReceiptPrint.ClientID %>').attr('checked') == 'checked') {
          $('#<%=cbReceiptPrintDetail.ClientID %>').removeAttr("disabled");
        }
        else {
          $('#<%=cbReceiptPrintDetail.ClientID %>').attr("checked", false);
          $('#<%=cbReceiptPrintDetail.ClientID %>').attr("disabled", "disabled");
        }
      });

      //寄送地址與購買人(電子發票證明聯)地址同
      $("[id*='cbCopyBuyer']").click(function () {
        if ($("[id*='cbCopyBuyer']").attr('checked') == 'checked') {
          $('#<%=txtReceiverName.ClientID %>').val($('#<%=txtBuyerName.ClientID %>').val());
          $('#<%=ddlReceiverSex.ClientID %>').val($('#<%=ddlBuyerSex.ClientID %>').val());
          $('#<%=txtReceiverPhone.ClientID %>').val($('#<%=txtBuyerPhone.ClientID %>').val());
          $('#<%=txtReceiverTel.ClientID %>').val($('#<%=txtBuyerTel.ClientID %>').val());
          $('#<%=txtReceiverMobile.ClientID %>').val($('#<%=txtBuyerMobile.ClientID %>').val());
          $('#<%=ddlReceiverZone1.ClientID %>').val($('#<%=ddlBuyerZone1.ClientID %>').val());
          $('#<%=ddlReceiverZone1.ClientID %>').change();
          $('#<%=ddlReceiverZone2.ClientID %>').val($('#<%=ddlBuyerZone2.ClientID %>').val());
          $('#<%= hfReceiverZone1.ClientID %>').val($('#<%= hfBuyerZone1.ClientID %>').val());
          $('#<%= hfReceiverZone2.ClientID %>').val($('#<%= hfBuyerZone2.ClientID %>').val());
          $('#<%=txtReceiverZIP.ClientID %>').val($('#<%=txtBuyerZIP.ClientID %>').val());
          $('#<%=txtReceiverAddress.ClientID %>').val($('#<%=txtBuyerAddress.ClientID %>').val());
        }
      });

      //信用卡卡別確認
      CheckCreditType();

      //信用卡卡別事件
      $('#<%=ddlCreditType.ClientID %>').change(function () {
        CheckCreditType();
      });

    });

    //信用卡卡別確認
    function CheckCreditType() {
      if ($("#hfPayType").val() == "1") {
        if ($('#<%= ddlCreditType.ClientID %>').val() == 'AX') {
          $('#<%= txtAuthCode.ClientID %>').attr("MaxLength", "4");
          $('#<%= txtCreditNumber4.ClientID %>').attr("MaxLength", "3");
          if ($('#<%= txtCreditNumber4.ClientID %>').val().length > 3) {
            $('#<%= txtCreditNumber4.ClientID %>').val($('#<%= txtCreditNumber4.ClientID %>').val().substring(0, 3));
          }
        }
        else {
          $('#<%= txtCreditNumber4.ClientID %>').attr("MaxLength", "4");
          $('#<%= txtAuthCode.ClientID %>').attr("MaxLength", "3");
          if ($('#<%= txtAuthCode.ClientID %>').val().length > 3) {
            $('#<%= txtAuthCode.ClientID %>').val($('#<%= txtAuthCode.ClientID %>').val().substring(0, 3));
          }
        }
      }
    }

    //建立生日日選項
    function fillDay() {
      var year = $('#<%= ddlYear.ClientID %>').find(':selected').val();
      var month = $('#<%= ddlMonth.ClientID %>').find(':selected').val();

      //清空日下拉式選單
      $('#ddlDay').html('');
      //取得一個月有幾天
      var sDate = new Date(year + "/" + month + "/1");
      sDate.setMonth(sDate.getMonth() + 1);
      sDate.setDate(0);
      var intDay = sDate.getDate();
      //建立DaY=t下拉式選單
      for (var i = 1; i <= intDay; i++) {
        var strDay = i.toString();
        if (strDay.length < 2) {
          strDay = "0" + strDay;
        }
        $('#ddlDay').append($("<option></option>").attr("value", strDay).text(strDay));
      }
      //後端取日期暫存
      if ($('#<%= hiddenDay.ClientID %>').val().length > 0) {
        $('#ddlDay').val($('#<%= hiddenDay.ClientID %>').val());
      }
    }

    //郵遞區號
    $(document).ready(function () {
      InitAddress();
    });

    //郵遞區號初始化
    function InitAddress() {
      //取得縣市選項
      $('#<%= ddlBuyerZone1.ClientID %>').append($("<option></option>").attr("value", "").text(" - 縣市 - "));
        $('#<%= ddlReceiverZone1.ClientID %>').append($("<option></option>").attr("value", "").text(" - 縣市 - "));
        $('#<%= ddlBuyerZone2.ClientID %>').append($("<option></option>").attr("value", "").text(" - 鄉鎮市 - "));
        $('#<%= ddlReceiverZone2.ClientID %>').append($("<option></option>").attr("value", "").text(" - 鄉鎮市 - "));

        for (var i in zip[0]) {
          $('#<%= ddlBuyerZone1.ClientID %>').append($("<option></option>").attr("value", zip[0][i]).text(zip[0][i]));
        $('#<%= ddlReceiverZone1.ClientID %>').append($("<option></option>").attr("value", zip[0][i]).text(zip[0][i]));
      }

        //購買人縣市變更事件
      $('#<%= ddlBuyerZone1.ClientID %>').change(function () {
          //清除Zone2與ZipCode
          $('#<%= txtBuyerZIP.ClientID %>').val("");
        $('#<%= ddlBuyerZone2.ClientID %> option').remove();
        $('#<%= ddlBuyerZone2.ClientID %>').append($("<option></option>").attr("value", "").text(" - 鄉鎮市 - "));
        if (this.selectedIndex > 0) {
          for (var i in zip[this.value]) {
            $('#<%= ddlBuyerZone2.ClientID %>').append($("<option></option>").attr("value", i).text(i));
            }
          }
      });

        //收件人縣市變更事件
        $('#<%= ddlReceiverZone1.ClientID %>').change(function () {
          //清除Zone2與ZipCode
          $('#<%= txtReceiverZIP.ClientID %>').val("");
          $('#<%= ddlReceiverZone2.ClientID %> option').remove();
          $('#<%= ddlReceiverZone2.ClientID %>').append($("<option></option>").attr("value", "").text(" - 鄉鎮市 - "));
          if (this.selectedIndex > 0) {
            for (var i in zip[this.value]) {
              $('#<%= ddlReceiverZone2.ClientID %>').append($("<option></option>").attr("value", i).text(i));
            }
          }
        });

        //購買人鄉鎮區變更事件
        $('#<%= ddlBuyerZone2.ClientID %>').change(function () {
          if (this.selectedIndex > 0) {
            $('#<%= txtBuyerZIP.ClientID %>').val(zip[$('#<%= ddlBuyerZone1.ClientID %>').find(":selected").val()][$('#<%= ddlBuyerZone2.ClientID %>').find(":selected").val()]);
          //紀錄所選Zone1,Zone2
          $('#<%= hfBuyerZone1.ClientID %>').val($('#<%= ddlBuyerZone1.ClientID %>').find(":selected").val());
          $('#<%= hfBuyerZone2.ClientID %>').val($('#<%= ddlBuyerZone2.ClientID %>').find(":selected").val());
        }
        });

        //收件人鄉鎮區變更事件
      $('#<%= ddlReceiverZone2.ClientID %>').change(function () {
          if (this.selectedIndex > 0) {
            $('#<%= txtReceiverZIP.ClientID %>').val(zip[$('#<%= ddlReceiverZone1.ClientID %>').find(":selected").val()][$('#<%= ddlReceiverZone2.ClientID %>').find(":selected").val()]);
          //紀錄所選Zone1,Zone2
          $('#<%= hfReceiverZone1.ClientID %>').val($('#<%= ddlReceiverZone1.ClientID %>').find(":selected").val());
          $('#<%= hfReceiverZone2.ClientID %>').val($('#<%= ddlReceiverZone2.ClientID %>').find(":selected").val());
        }
      });

        //由Zip取得Zone1,Zone2
      if ($('#<%= txtBuyerZIP.ClientID %>').val().length > 0) {
          $('#<%= ddlBuyerZone1.ClientID %>').val($('#<%= hfBuyerZone1.ClientID %>').val());
        $('#<%= ddlBuyerZone1.ClientID %>').change();
        $('#<%= ddlBuyerZone2.ClientID %>').val($('#<%= hfBuyerZone2.ClientID %>').val());
        $('#<%= ddlBuyerZone2.ClientID %>').change();
      }
      if ($('#<%= txtReceiverZIP.ClientID %>').val().length > 0) {
          $('#<%= ddlReceiverZone1.ClientID %>').val($('#<%= hfReceiverZone1.ClientID %>').val());
          $('#<%= ddlReceiverZone1.ClientID %>').change();
          $('#<%= ddlReceiverZone2.ClientID %>').val($('#<%= hfReceiverZone2.ClientID %>').val());
          $('#<%= ddlReceiverZone2.ClientID %>').change();
        }

        //愛心碼專戶索引選取視窗
        $('.PopCharityCode').click(function (event) {
          window.open($(this).attr("href"), 'PopCharityCode', 'width=570px;menubar=no,location=no,resizable=no,scrollbars=yes,status=no');
          event.preventDefault();
        });

      }

      //發票類別狀態設定
      function CheckReceiptType() {
        if ($('#<%= rbReceiptType3.ClientID %>').attr('checked') == 'checked') {
          $('#<%=txtCharityCode.ClientID %>').removeAttr("disabled");
          $('#<%=cbReceiptPrint.ClientID %>').attr("checked", false);
          $('#<%=cbReceiptPrint.ClientID %>').attr("disabled", "disabled");
          $('#trReceipt1').attr("class", "target");
          $('#trReceipt2').attr("class", "target");
          $('#trReceipt3').attr("class", "target");
          $('#trReceipt4').attr("class", "target");

        }
        else if ($('#<%= rbReceiptType1.ClientID %>').attr('checked') == 'checked') {
          $('#<%=txtCharityCode.ClientID %>').val("");
          $('#<%=txtCharityCode.ClientID %>').attr("disabled", "disabled");
          $('#<%=cbReceiptPrint.ClientID %>').removeAttr("disabled");
          $('#trReceipt1').attr("class", "target");
          $('#trReceipt2').removeAttr("class");
          $('#trReceipt3').removeAttr("class");
          $('#trReceipt4').removeAttr("class");
          $('#<%=rbReceipt1.ClientID %>').removeAttr("style");
          $('#<%=cbReceiptPrint.ClientID %>').attr("style", "display:none");
          //發票類別-個人 預設值
          if ($('#<%= rbReceipt1.ClientID %>').attr('checked') != 'checked'
             & $('#<%= rbReceipt2.ClientID %>').attr('checked') != 'checked'
             & $('#<%= rbReceipt3.ClientID %>').attr('checked') != 'checked') {
            $('#<%=rbReceipt1.ClientID %>').attr("checked", true);
            //確認狀態
            CheckRecept();
          }
        }
        else {
          $('#<%=txtCharityCode.ClientID %>').val("");
          $('#<%=txtCharityCode.ClientID %>').attr("disabled", "disabled");
          $('#<%=cbReceiptPrint.ClientID %>').removeAttr("disabled");
          $('#trReceipt1').removeAttr("class");
          $('#trReceipt2').removeAttr("class");
          $('#trReceipt3').removeAttr("class");
          $('#trReceipt4').removeAttr("class");
          $('#<%=rbReceipt1.ClientID %>').attr("style", "display:none");
          $('#<%=cbReceiptPrint.ClientID %>').removeAttr("style");
        }
    }

    //電子發票證明聯、手機條碼與自然人憑證設定
    function CheckRecept() {
      if ($('#<%= rbReceipt1.ClientID %>').attr('checked') == 'checked') {
        $('#<%=cbReceiptPrintDetail.ClientID %>').removeAttr("disabled");
        $('#<%=txtCellPhoneCode.ClientID %>').attr("disabled", "disabled")
        $('#<%=txtCellPhoneCodeCheck.ClientID %>').attr("disabled", "disabled")
        $('#<%=txtCitiDigiCertificate.ClientID %>').attr("disabled", "disabled")
        $('#<%=txtCitiDigiCertificateCheck.ClientID %>').attr("disabled", "disabled")
      }
      else if ($('#<%= rbReceipt2.ClientID %>').attr('checked') == 'checked') {
        if ($('#<%= cbReceiptPrint.ClientID %>').attr('checked') == 'checked') {
          $('#<%=cbReceiptPrintDetail.ClientID %>').removeAttr("disabled");
        }
        else {
          $('#<%=cbReceiptPrintDetail.ClientID %>').attr("checked", false);
          $('#<%=cbReceiptPrintDetail.ClientID %>').attr("disabled", "disabled");
        }
        $('#<%=txtCellPhoneCode.ClientID %>').removeAttr("disabled");
        $('#<%=txtCellPhoneCodeCheck.ClientID %>').removeAttr("disabled");
        $('#<%=txtCitiDigiCertificate.ClientID %>').attr("disabled", "disabled")
        $('#<%=txtCitiDigiCertificateCheck.ClientID %>').attr("disabled", "disabled")
      }
      else {
        if ($('#<%= cbReceiptPrint.ClientID %>').attr('checked') == 'checked') {
          $('#<%=cbReceiptPrintDetail.ClientID %>').removeAttr("disabled");
        }
        else {
          $('#<%=cbReceiptPrintDetail.ClientID %>').attr("checked", false);
          $('#<%=cbReceiptPrintDetail.ClientID %>').attr("disabled", "disabled");
        }
        $('#<%=txtCellPhoneCode.ClientID %>').attr("disabled", "disabled");
        $('#<%=txtCellPhoneCodeCheck.ClientID %>').attr("disabled", "disabled");
        $('#<%=txtCitiDigiCertificate.ClientID %>').removeAttr("disabled");
        $('#<%=txtCitiDigiCertificateCheck.ClientID %>').removeAttr("disabled");
      }
  }

  //信用卡聯名卡規則驗證
  function check_credit_input() {
    //先確認付款方式是否為信用卡
    var PayType = $("[id*='hfPayType']").val();
    //alert(PayType);
    if (PayType != "1") { //若不是信用卡，則不做規則驗證
      return true;
    }    

    var strMsg = "";
    var txtCreditNumber1 = $("[id*='txtCreditNumber1']").val();
    var txtCreditNumber2 = $("[id*='txtCreditNumber2']").val();
    var txtCreditNumber3 = $("[id*='txtCreditNumber3']").val();
    var txtCreditNumber4 = $("[id*='txtCreditNumber4']").val();
    var CardNo = txtCreditNumber1 + txtCreditNumber2 + txtCreditNumber3 + txtCreditNumber4;
    var CardType = $("[id*='ddlCreditType']").val();
    var AuthCode = $("[id*='txtAuthCode']").val();
    var ExpireYear = $("[id*='ddlCreditExpireYear']").val();
    var ExpireMonth = $("[id*='ddlCreditExpireMonth']").val();
    var DiscType = $("[id*='hfDiscType']").val();

    if (CardNo.length == 0) {
      strMsg = "請填卡號!<br/>";
    }
    else if (AuthCode.length == 0) {
      strMsg = "請填驗證碼!<br/>";
    }
    else {
      if ((ExpireYear + ExpireMonth) < "<%= DateTime.Now.ToString("yyyyMM") %>") {
        strMsg = "信用卡已過期!<br/>";
      }
      if (CardType == "VI" || CardType == "MT" || CardType == "JC") {
        if (CardNo.length != 16 || isNaN(CardNo)) {
          strMsg += "信用卡卡號錯誤!<br/>";
        }
        else {
          if ((CardType == "VI" && CardNo.slice(0, 1) != "4") ||
             (CardType == "MT" && CardNo.slice(0, 1) != "5") ||
             (CardType == "JC" && CardNo.slice(0, 2) != "35")) {
            strMsg += "信用卡卡號錯誤!<br/>";
          }
          else {
            //檢查聯名卡是否符合 --VISA/Master 
            if (DiscType == "2") { 
              var sCode8 = CardNo.slice(0, 8);
              var sCode7 = CardNo.slice(0, 7);
              if ((sCode8 != "43117854") && (sCode8 != "45631810") && (sCode8 != "54337410") && (sCode8 != "46367067") && (sCode8 != "55200058") && (sCode8 != "55200097") && (sCode7 != "5520005")) {
                strMsg += "輸入卡別不正確，請使用符合優惠方案信用卡或選擇其他方式重新結帳，謝謝!<br/>";
              }
            }
            //銀行優惠案聯名卡 end                
          }
        }
      }
      else if (CardType == "AX") {
        if (CardNo.length != 15 || isNaN(CardNo)) {
          strMsg += "信用卡卡號錯誤!<br/>";
        }
        else {
          if (CardNo.slice(0, 1) != "3") {
            strMsg += "信用卡卡號錯誤!<br/>";
          }
          else {
            //檢查參加銀行優惠案的卡號是否符合 --AX美國運通 
            if (DiscType == "2") {
              var sCode6 = CardNo.slice(0, 6);
              if ((sCode6 != "376357") && (sCode6 != "376355") && (sCode6 != "376356")) {
                strMsg += "輸入卡別不正確，請使用符合優惠方案信用卡或選擇其他方式重新結帳，謝謝!<br/>";
              }
            }
            //銀行優惠案 end 
          }
        }
      }
      else if (CardType == "DC") {
        if (CardNo.length != 11 && CardNo.length != 13 && CardNo.length != 14) {
          strMsg += "信用卡卡號錯誤!<br/>";
        }
        else {
          //檢查參加銀行優惠案的卡號是否符合 --大來卡
          if (DiscType == "2") {
            if (CardNo.slice(0, 6) != "364826") {
              strMsg += "輸入卡別不正確，請使用符合優惠方案信用卡或選擇其他方式重新結帳，謝謝!<br/>";
            }
          }
        }
      }
    }

    //2013/12/20 因為新的中國信託美國運通卡的驗證碼是3碼，因此只判斷不能小於3即可!
    if (AuthCode.length < 3) {
      strMsg += "請輸入認證碼(卡片背面末三碼/美國運通卡號上方三碼或四碼)!<br/>";
    }
    

    if (strMsg.length > 0) {
      $("#spanMsg").html(strMsg);
      lightbox($(".divCheckMsg").prop('outerHTML'));
      $("[id*='txtCreditNumber1']").focus();
      return false;
    }
    //return true;
  }
  </script>
  <script src="../Scripts/address.js"></script>
  <asp:HiddenField ID="hfScroll" runat="server" Value="0" />
  <asp:HiddenField ID="hfPayType" runat="server" />
  <asp:HiddenField ID="hfDiscType" runat="server" />
  <div style="display: none" class="popup-content">
    <div class="divCheckMsg">
        <div class="notice">
            <h4><span id="spanMsg"></span></h4>
        </div>
        <div class="liner"></div>
        <div class="links">
            <a href="javascript:void(0);" class="btn cancelbtn">確 定</a>
        </div>
    </div>
  </div>
  <div class="steps">
    <ul>
      <li class="active">STEP 1. 填寫資料</li>
      <li>STEP 2. 確認資料</li>
      <li>STEP 3. 完成下單</li>
    </ul>
  </div>
  <div class="list-table wish">
    <div class="table-title">
      <span class="fl list-acord">購物清單</span> <span class="red-text fr">總價
        <asp:Literal ID="ltlTotal" runat="server"></asp:Literal></span>
    </div>
    <div class="JS_talbe">
      <asp:GridView ID="gvShoppingList" runat="server" AutoGenerateColumns="False" GridLines="None" OnRowCommand="gvShoppingList_RowCommand">
        <Columns>
          <asp:BoundField HeaderStyle-CssClass="spacer">
            <HeaderStyle CssClass="spacer"></HeaderStyle>
          </asp:BoundField>
          <asp:TemplateField HeaderText="NO">
            <ItemTemplate>
              <%# Container.DataItemIndex+1 %>
            </ItemTemplate>
            <ItemStyle Width="50px" />
          </asp:TemplateField>
          <asp:TemplateField HeaderText="商品圖">
            <ItemTemplate>
              <img src='<%# Server.HtmlEncode(Eval("ImagePath").ToString()) %>' style="width: 50px" />
            </ItemTemplate>
            <ItemStyle Width="50px" />
          </asp:TemplateField>
          <asp:TemplateField HeaderText="商品名稱">
            <ItemTemplate>
              <%# Server.HtmlEncode(Eval("ProductName").ToString()) %>
            </ItemTemplate>
            <ItemStyle Width="230px" />
          </asp:TemplateField>
          <asp:TemplateField HeaderText="單價">
            <ItemTemplate>
              <%# Server.HtmlEncode(Eval("Price", "{0:$ #,##0}").ToString()) %>
            </ItemTemplate>
          </asp:TemplateField>
          <asp:TemplateField HeaderText="數量">
            <ItemTemplate>
              <%# Server.HtmlEncode(Eval("Quantity", "{0:#,##0}").ToString()) %>
            </ItemTemplate>
            <ItemStyle Width="150px" />
          </asp:TemplateField>
          <asp:TemplateField HeaderText="抵購哩程">
            <ItemTemplate>
              <%# Server.HtmlEncode(Eval("Mileage", "{0:#,##0}").ToString()) %>
            </ItemTemplate>
          </asp:TemplateField>
          <asp:TemplateField HeaderText="規格">
            <ItemTemplate>
              <%# Server.HtmlEncode(Eval("Spec").ToString()) %>
            </ItemTemplate>
          </asp:TemplateField>
          <asp:TemplateField HeaderText="小計">
            <ItemTemplate>
              <%# string.Format("{0:$ #,##0}",Convert.ToUInt32(Eval("Quantity"))*Convert.ToUInt32(Eval("Price"))) %>
            </ItemTemplate>
          </asp:TemplateField>
        </Columns>
      </asp:GridView>
      <div class="pink-result-all">
        <div class="mini-result">
          <table>
            <tr>
              <th>單價總計(含稅)</th>
              <td>
                <asp:Literal ID="ltlPriceSum" runat="server" Text="$ 0"></asp:Literal></td>
            </tr>
            <tr>
              <th>折扣金額(含稅)</th>
              <td>-<asp:Literal ID="ltlDiscountSum" runat="server" Text="$ 0"></asp:Literal></td>
            </tr>
            <tr>
              <th>E-Coupon金額</th>
              <td>-<asp:Literal ID="ltlECouponSum" runat="server" Text="$ 0"></asp:Literal></td>
            </tr>
            <tr>
              <th>運費</th>
              <td>
                <asp:Literal ID="ltlTransFee" runat="server" Text="$ 0"></asp:Literal></td>
            </tr>
            <tr class="spaced">
              <th>扣抵總哩程數</th>
              <td>
                <asp:Literal ID="ltlMileSum" runat="server" Text="0"></asp:Literal></td>
            </tr>
            <tr class="red-text">
              <th>消費總計(含稅)</th>
              <td>
                <asp:Literal ID="ltlnTheMoneyWeGet" runat="server" Text="$ 0"></asp:Literal>
                +
                <asp:Literal ID="ltlMileSum2" runat="server" Text="0"></asp:Literal>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
  <div class="req t-a-r">
    <span class="required">星號為必填選項</span>
  </div>

  <!-- Form -->
  <div class="form">
    <h4>購買人資料</h4>
    <table>
      <tr>
        <th>姓名</th>
        <td class="required">
          <asp:TextBox ID="txtBuyerName" runat="server"></asp:TextBox>
          <asp:Literal ID="ltlBuyerName" runat="server"></asp:Literal>
        </td>
        <th>身分證號碼</th>
        <td>
          <asp:TextBox ID="txtBuyerID" runat="server" MaxLength="10"></asp:TextBox>
          <asp:Literal ID="ltlBuyerID" runat="server"></asp:Literal>
        </td>
      </tr>
      <tr>
        <th>稱謂</th>
        <td class="required">
          <asp:DropDownList ID="ddlBuyerSex" runat="server">
            <asp:ListItem Text="先生" Value="M"></asp:ListItem>
            <asp:ListItem Text="小姐" Value="F"></asp:ListItem>
          </asp:DropDownList>
        </td>
        <th>生日</th>
        <td class="required">
          <table>
            <tr>
              <td>
                <asp:DropDownList ID="ddlYear" runat="server" CssClass="s"></asp:DropDownList>年
              </td>
              <td>
                <asp:DropDownList ID="ddlMonth" runat="server" CssClass="s"></asp:DropDownList>
              </td>
              <td>
                <select id="ddlDay" class="s"></select>
                <asp:HiddenField ID="hiddenDay" runat="server" Value="01" />
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <th>連絡電話</th>
        <td class="required">
          <asp:TextBox ID="txtBuyerPhone" runat="server"></asp:TextBox>
          <asp:Literal ID="ltlBuyerPhone" runat="server"></asp:Literal>
        </td>
        <th>傳真電話</th>
        <td>
          <asp:TextBox ID="txtBuyerFax" runat="server"></asp:TextBox>
          <asp:Literal ID="ltlBuyerFax" runat="server"></asp:Literal>
        </td>
      </tr>
      <tr>
        <th>公司電話</th>
        <td>
          <asp:TextBox ID="txtBuyerTel" runat="server"></asp:TextBox>
          <asp:Literal ID="ltlBuyerTel" runat="server"></asp:Literal>
        </td>
        <th>行動電話</th>
        <td>
          <asp:TextBox ID="txtBuyerMobile" runat="server"></asp:TextBox>
          <asp:Literal ID="ltlBuyerMobile" runat="server"></asp:Literal>
        </td>
      </tr>
      <tr>
        <th>E-mail</th>
        <td class="required">
          <asp:TextBox ID="txtBuyerEamil" runat="server"></asp:TextBox>
          <asp:Literal ID="ltlBuyerEamil" runat="server"></asp:Literal>
        </td>
        <td colspan="2">
          <table>
            <tr>
              <th>請寄給我長榮樂e購相關訊息</th>
              <td>
                <asp:DropDownList ID="ddlEDM" runat="server" CssClass="in">
                  <asp:ListItem Text="是" Value="1"></asp:ListItem>
                  <asp:ListItem Text="否" Value="0"></asp:ListItem>
                </asp:DropDownList>
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <th>通訊地址</th>
        <td colspan="3" class="required">
          <table>
            <tr>
              <td>
                <asp:DropDownList ID="ddlBuyerZone1" runat="server"></asp:DropDownList>
                <asp:Literal ID="ltlBuyerZone1" runat="server"></asp:Literal>
                <asp:HiddenField ID="hfBuyerZone1" runat="server" />
              </td>
              <td>
                <asp:DropDownList ID="ddlBuyerZone2" runat="server"></asp:DropDownList>
                <asp:Literal ID="ltlBuyerZone2" runat="server"></asp:Literal>
                <asp:HiddenField ID="hfBuyerZone2" runat="server" />
              </td>
              <td>
                <asp:TextBox ID="txtBuyerZIP" runat="server" CssClass="s"></asp:TextBox>
                <asp:Literal ID="ltlBuyerZIP" runat="server"></asp:Literal>
              </td>
              <td>
                <asp:TextBox ID="txtBuyerAddress" runat="server" CssClass="l"></asp:TextBox>
                <asp:Literal ID="ltlBuyerAddress" runat="server"></asp:Literal>
              </td>
            </tr>
            <tr>
              <td colspan="3" rowspan="2">
                <ul>
                  <li>郵政信箱無法提供宅配服務</li>
                  <li>目前商品運送以台灣本島、澎湖、金門為限</li>
                </ul>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>

    <div id="divCreditCard" runat="server">
      <h4>輸入信用卡資料</h4>
      <table class="atm">
        <tr>
          <th>信用卡卡別</th>
          <td class="required">
            <asp:DropDownList ID="ddlCreditType" runat="server">
              <asp:ListItem Text="VISA CARD" Value="VI"></asp:ListItem>
              <asp:ListItem Text="MASTER CARD" Value="MT"></asp:ListItem>
              <asp:ListItem Text="JCB" Value="JC"></asp:ListItem>
              <asp:ListItem Text="AMERICAN EXPRESS" Value="AX"></asp:ListItem>
              <asp:ListItem Text="DINER CLUB" Value="DC"></asp:ListItem>
            </asp:DropDownList>
          </td>
          <td colspan="2" rowspan="4">
            <div class="atm-container">
              <ul class="atm-info">
                <li>在輸入信用卡資料以後，點選〝下一步〞</li>
                <li>除了以現有鍵盤輸入之外，我們誠摯地建議您使用
                                    右側動態鍵盤輸入「信用卡卡號」與「信用卡檢查
                                    碼」，如此可更加確保網路交易的安全性，並防止
                                    有心人士利用鍵盤側錄程式截取您的「信用卡號」
                                    與「信用卡檢查碼」。
                </li>
              </ul>
              <div class="numpad">
                <div class="tip">
                  請以滑鼠點選您的「信用卡號」與「信用卡檢查碼」。
                </div>
                <div class="keys">
                  <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>
                    <li>0</li>
                  </ul>
                </div>
                <div class="cleaner">
                  <span class="clean-all">全部清除</span>
                  <span class="clean-one">倒退鍵</span>
                </div>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <th>信用卡卡號 </th>
          <td class="required first-container">
            <table>
              <tr>
                <td>
                  <asp:TextBox ID="txtCreditNumber1" runat="server" CssClass="s first" MaxLength="4"></asp:TextBox>
                  <asp:Literal ID="ltlCreditNumber1" runat="server"></asp:Literal>
                </td>
                <td>-</td>
                <td>
                  <asp:TextBox ID="txtCreditNumber2" runat="server" CssClass="s" MaxLength="4"></asp:TextBox>
                  <asp:Literal ID="ltlCreditNumber2" runat="server"></asp:Literal>
                </td>
                <td>-</td>
                <td>
                  <asp:TextBox ID="txtCreditNumber3" runat="server" CssClass="s" MaxLength="4"></asp:TextBox>
                  <asp:Literal ID="ltlCreditNumber3" runat="server"></asp:Literal>
                </td>
                <td>-</td>
                <td>
                  <asp:TextBox ID="txtCreditNumber4" runat="server" CssClass="s last" MaxLength="4"></asp:TextBox>
                  <asp:Literal ID="ltlCreditNumber4" runat="server"></asp:Literal>
                </td>
              </tr>

            </table>
          </td>
        </tr>
        <tr>
          <th>認證碼</th>
          <td class="required">
            <asp:TextBox ID="txtAuthCode" runat="server" TextMode="Password" CssClass="sm security" MaxLength="4"></asp:TextBox>
            <asp:Literal ID="ltlAuthCode" runat="server"></asp:Literal>
            <a id="aCreditCardHelp" class="help" href="#"></a>
            <div style="display: none" class="popup-content">
              <div class="credit-card">
                <h4>認證碼為下列紅框標示處</h4>
                <div  class="pop-image">
                  <div class="border"></div>
                  <img src="../Images/ContentImages/CreditCard.png" />
                  <br/>
                  <img src="../Images/ContentImages/CreditCard02.png" />
                </div>
                <%--<div class="liner"></div>
                <div class="links"><a href="#" class="btn cancelbtn">確 定</a></div>--%>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <th>有效期限</th>
          <td class="required">
            <table>
              <tr>
                <td>
                  <asp:DropDownList ID="ddlCreditExpireMonth" runat="server" CssClass="s">
                    <asp:ListItem Text="01" Value="01"></asp:ListItem>
                    <asp:ListItem Text="02" Value="02"></asp:ListItem>
                    <asp:ListItem Text="03" Value="03"></asp:ListItem>
                    <asp:ListItem Text="04" Value="04"></asp:ListItem>
                    <asp:ListItem Text="05" Value="05"></asp:ListItem>
                    <asp:ListItem Text="06" Value="06"></asp:ListItem>
                    <asp:ListItem Text="07" Value="07"></asp:ListItem>
                    <asp:ListItem Text="08" Value="08"></asp:ListItem>
                    <asp:ListItem Text="09" Value="09"></asp:ListItem>
                    <asp:ListItem Text="10" Value="10"></asp:ListItem>
                    <asp:ListItem Text="11" Value="11"></asp:ListItem>
                    <asp:ListItem Text="12" Value="12"></asp:ListItem>
                  </asp:DropDownList>
                  <asp:Literal ID="ltlCreditExpireMonth" runat="server"></asp:Literal>
                </td>
                <td>
                  <asp:DropDownList ID="ddlCreditExpireYear" runat="server" CssClass="s"></asp:DropDownList>
                  <asp:Literal ID="ltlCreditExpireYear" runat="server"></asp:Literal>
              </tr>
            </table>
          </td>
        </tr>

      </table>
    </div>

    <h4>電子發票證明聯</h4>
    <table>
      <tr>
        <th>發票類別</th>
        <td class="arange required">
          <table>
            <tr>              
              <td>
                <asp:RadioButton ID="rbReceiptType1" runat="server" GroupName="ReceiptType" />個人
              </td>
              <td>
                <asp:RadioButton ID="rbReceiptType2" runat="server" GroupName="ReceiptType" />公司
              </td>
              <td>
                <asp:RadioButton ID="rbReceiptType3" runat="server" GroupName="ReceiptType" Checked="true" />捐贈
              </td>
            </tr>
          </table>
        </td>
        <th>捐贈機構</th>
        <td>
          <asp:TextBox ID="txtCharityCode" runat="server" CssClass="m"></asp:TextBox>
          <a href="CharityCode.aspx" class="PopCharityCode">愛心碼專戶索引(請選取)</a>
          <asp:Literal ID="ltlCharityCode" runat="server"></asp:Literal>
        </td>
      </tr>
      <tr>
        <td colspan="4">
          <div class="liner dotted"></div>
        </td>
      </tr>
      <tr id="trReceipt1" class="target">
        <th>統一編號</th>
        <td class="required">
          <asp:TextBox ID="txtBuyerCompanyID" runat="server" CssClass="m" MaxLength="8"></asp:TextBox>
          <asp:Literal ID="ltlBuyerCompanyID" runat="server"></asp:Literal>
        </td>
        <th>
            公司抬頭
        </th>
        <td class="required">
          <asp:TextBox ID="txtBuyerCompanyTitle" runat="server" CssClass="m"></asp:TextBox>
          <asp:Literal ID="ltlBuyerCompanyTitle" runat="server"></asp:Literal>
        </td>
      </tr>
      <tr id="trReceipt2" class="target">
        <th colspan="2">
          <asp:RadioButton ID="rbReceipt1" runat="server" GroupName="Receipt" />
          <asp:CheckBox ID="cbReceiptPrint" runat="server" Enabled="false" />
          我要索取電子發票證明聯
        </th>
        <td colspan="2">
          <asp:CheckBox ID="cbReceiptPrintDetail" runat="server" Enabled="false" />
          列印購物明細
        </td>
      </tr>
      <tr id="trReceipt3" class="target">
        <th>
          <asp:RadioButton ID="rbReceipt2" runat="server" GroupName="Receipt" />
          手機條碼
        </th>
        <td>
          <asp:TextBox ID="txtCellPhoneCode" runat="server" CssClass="m" Enabled="false" MaxLength="9"></asp:TextBox>
          <a href="https://www.einvoice.nat.gov.tw/APMEMBERVAN/GeneralCarrier/generalCarrier?mp=1" target="_blank">手機條碼服務專區</a>
          <asp:Literal ID="ltlCellPhoneCode" runat="server"></asp:Literal>
        </td>
         <th>確認手機條碼</th>
        <td>
          <asp:TextBox ID="txtCellPhoneCodeCheck" runat="server" CssClass="m" Enabled="false" MaxLength="9"></asp:TextBox>
          <asp:Literal ID="ltlCellPhoneCodeCheck" runat="server"></asp:Literal>
        </td>
      </tr>
      <tr id="trReceipt4" class="target">
        <th>
          <asp:RadioButton ID="rbReceipt3" runat="server" GroupName="Receipt" />
          自然人憑證
        </th>
        <td>
          <asp:TextBox ID="txtCitiDigiCertificate" runat="server" CssClass="m" Enabled="false" MaxLength="16"></asp:TextBox>
          <asp:Literal ID="ltlCitiDigiCertificate" runat="server"></asp:Literal>
        </td>
        <th>確認自然人憑證</th>
        <td>
          <asp:TextBox ID="txtCitiDigiCertificateCheck" runat="server" CssClass="m" Enabled="false" MaxLength="16"></asp:TextBox>
          <asp:Literal ID="ltlCitiDigiCertificateCheck" runat="server"></asp:Literal>
        </td>
      </tr>
    </table>
    <h4>收件人地址</h4>
    <table>
      <tr>
        <th colspan="4">
          <%--<input type="checkbox" id="cbCopyBuyer" />--%>
          <asp:CheckBox ID="cbCopyBuyer" runat="server" />
          <%-- <input type="checkbox" name="name" value=" " />--%>
                    寄送地址與購買人(電子發票證明聯)地址同
        </th>
      </tr>
      <tr>
        <th>姓名</th>
        <td class="required">
          <asp:TextBox ID="txtReceiverName" runat="server" CssClass="m"></asp:TextBox>
          <asp:Literal ID="ltlReceiverName" runat="server"></asp:Literal>
          <%--<input type="text" name="name" value=" " />--%>
        </td>
        <th>稱謂</th>
        <td class="required">
          <asp:DropDownList ID="ddlReceiverSex" runat="server">
            <asp:ListItem Text="先生" Value="M"></asp:ListItem>
            <asp:ListItem Text="小姐" Value="F"></asp:ListItem>
          </asp:DropDownList>
        </td>
      </tr>
      <tr>
        <th>連絡電話</th>
        <td class="required">
          <asp:TextBox ID="txtReceiverPhone" runat="server" CssClass="m"></asp:TextBox>
          <asp:Literal ID="ltlReceiverPhone" runat="server"></asp:Literal>
        </td>
        <th>公司電話
        </th>
        <td>
          <asp:TextBox ID="txtReceiverTel" runat="server" CssClass="m"></asp:TextBox>
          <asp:Literal ID="ltlReceiverTel" runat="server"></asp:Literal>
        </td>
      </tr>
      <tr>
        <th>行動電話</th>
        <td colspan="3">
          <asp:TextBox ID="txtReceiverMobile" runat="server" CssClass="m"></asp:TextBox>
          <asp:Literal ID="ltlReceiverMobile" runat="server"></asp:Literal>
        </td>
      </tr>
      <tr>
        <th>通訊地址</th>
        <td colspan="3" class="required">
          <table>
            <tr>
              <td>
                <asp:DropDownList ID="ddlReceiverZone1" runat="server"></asp:DropDownList>
                <asp:Literal ID="ltlReceiverZone1" runat="server"></asp:Literal>
                <asp:HiddenField ID="hfReceiverZone1" runat="server" />
                <%-- <select class="error">
                                    <option value="value">縣市</option>
                                </select>--%>
              </td>
              <td>
                <asp:DropDownList ID="ddlReceiverZone2" runat="server"></asp:DropDownList>
                <asp:Literal ID="ltlReceiverZone2" runat="server"></asp:Literal>
                <asp:HiddenField ID="hfReceiverZone2" runat="server" />
                <%--<select class="error">
                                    <option value="value">鄉鎮市</option>
                                </select>--%>
              </td>
              <td>
                <asp:TextBox ID="txtReceiverZIP" runat="server" CssClass="s"></asp:TextBox>
                <asp:Literal ID="ltlReceiverZIP" runat="server"></asp:Literal>
                <%--input class="s error" type="text" name="name" value=" " />--%>
              </td>
              <td>
                <asp:TextBox ID="txtReceiverAddress" runat="server" CssClass="l"></asp:TextBox>
                <asp:Literal ID="ltlReceiverAddress" runat="server"></asp:Literal>
                <%--<input class="l error" type="text" name="name" value=" " />--%>
              </td>
            </tr>
          </table>
        </td>
      </tr>

    </table>

    <h4>長榮樂e購電子商務網站個資蒐集前告知</h4>
    <div class="form-agree">
      <p>
        為確保消費者個人資料、隱私及消費者權益之保護，長榮航空樂e購電子商務網站於交易過程中將使用消費者之個人資料，僅依個人資料保護法第8條規定告知以下事項:
      </p>
      <ul>
        <li>蒐集目的及方式
            <ul>
              <li>為進行客戶管理、會員管理及行銷與內部統計調查與分析(法定特定目的項目編號為148,090,040,157)。蒐集方式將透過加入會員或訂購單填寫方式進行個人資料之蒐集。</li>
              <li>蒐集之個人資料類別
                  <p>於網站內蒐集的個人資料包括</p>
                  <ul>
                    <li>C001-辨識個人者。</li>
                    <li>C002-辨識財務者。</li>
                    <li>C003-政府資料中之辨識者。</li>
                    <li>C011-個人描述。</li>
                  </ul>
              </li>
            </ul>
        </li>
        <li>利用期間、地區、對象及方式
            <ul>
              <li>期間：本公司營運期間</li>
              <li>地區：消費者之個人資料將用於台灣地區</li>
              <li>利用對象及方式：消費者之個人資料蒐集除用於本公司之會員管理、客戶管理之檢索查詢等功能外，將有以下利用：
                <ul>
                  <li>物品寄送：於交寄相關商品時，將消費者個人資料利用於交付給相關物流、郵寄廠商用於物品寄送之目的。</li>
                  <li>金融交易及授權：消費者所提供之財務相關資料，將於金融交易過程(如信用卡授權、轉帳)時提交給金融機構以完成金融交易。</li>
                  <li>行銷：本公司將利用消費者之地址及郵件、電話號碼進行本公司或合作廠商之宣傳行銷。</li>
                </ul>
              </li>
            </ul>
        </li>
        <li>消費者個人資料之權利
            <p>消費者交付本公司個人資料者，依個資法得行使以下權利：</p>
            <ul>
              <li>
                <ul>
                  <li>查詢或請求閱覽</li>
                  <li>請求製給複製本</li>
                  <li>請求補充或更正</li>
                  <li>請求停止蒐集、處理或利用</li>
                  <li>請求刪除(若為處理中案件，可能因此無法執行)</li>
                  <li>消費者可來電洽詢本公司客服進行申請，經我們確認身分無誤後，本公司將迅速進行處理。(機上免稅品/樂e購免付費服務專線0800-535678)</li>
                  <li>如果您提供的個人資料不正確或不完整(如使用暱稱)，因無法確認您的真實身分，我們將無法配合您的隱私權主張(個資法第3條有關查詢或閱覽等權利)。</li>
                </ul>
              </li>
            </ul>
        </li>
      </ul>
      <div class="block ud">
        <asp:CheckBox ID="cbAgree" runat="server" />
        我已詳細閱讀並同意電子商務網站個資蒐集前告知
        <asp:Literal ID="ltlAgree" runat="server"></asp:Literal>
      </div>
    </div>
  </div>
  <!-- #Form -->
  <div class="control-links t-a-r">
    <a class="btn" href="OrderSummaryAndAmount.aspx">上一步</a>
    <asp:LinkButton ID="lbtnNext" runat="server" CssClass="btn"
      OnClientClick="return check_credit_input();"
      OnClick="lbtnNext_Click">下一步</asp:LinkButton>
  </div>
 
</asp:Content>

